<%- include('../../layouts/base/header', { title: '发现' }) %>

<div class="min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
        <!-- 热门书籍区域 -->
        <% if (hotData && hotData.length > 0) { %>
            <div class="mb-8 md:mb-12">
                <div class="flex items-center justify-between border-b border-gray-100 pb-4 mb-4 md:mb-6">
                    <h2 class="text-xl md:text-2xl font-bold text-gray-900 flex items-center">
                        <i class="fas fa-fire text-red-500 mr-2"></i>
                        热门书籍
                    </h2>
                    <a href="/explore/hot" target="_blank" class="text-sm text-gray-500 hover:text-blue-700 transition-colors duration-200">
                        <i class="fas fa-arrow-right mr-1"></i>
                    </a>
                </div>

                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 md:gap-8">
                    <% hotData.forEach(book => { %>
                        <%- include('../../components/book/card', { book: book, cardStyle: 'default' }) %>
                    <% }) %>
                </div>
            </div>
        <% } %>

        <!-- 最新书籍区域 -->
        <% if (latestData && latestData.length > 0) { %>
            <div class="mb-8 md:mb-12">
                <div class="flex items-center justify-between border-b border-gray-100 pb-4 mb-4 md:mb-6">
                    <h2 class="text-xl md:text-2xl font-bold text-gray-900 flex items-center">
                        <i class="fas fa-clock text-blue-500 mr-2"></i>
                        最新书籍
                    </h2>
                    <a href="/explore/latest" target="_blank" class="text-sm text-gray-500 hover:text-blue-700 transition-colors duration-200">
                        <i class="fas fa-arrow-right mr-1"></i>
                    </a>
                </div>

                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 md:gap-8">
                    <% latestData.forEach(book => { %>
                        <%- include('../../components/book/card', { book: book, cardStyle: 'default' }) %>
                    <% }) %>
                </div>
            </div>
        <% } %>

        <!-- 无数据时的显示 -->
        <% if ((!hotData || hotData.length === 0) && (!latestData || latestData.length === 0)) { %>
            <div class="col-span-full">
                <div class="bg-white rounded-lg border border-gray-100 py-12 md:py-16 text-center">
                    <div class="w-16 h-16 md:w-24 md:h-24 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center mx-auto mb-4 md:mb-6">
                        <i class="fas fa-book text-blue-500 text-2xl md:text-3xl"></i>
                    </div>
                    <h3 class="text-lg md:text-2xl font-bold text-gray-900 mb-2 md:mb-4">暂无书籍</h3>
                    <p class="text-gray-500 text-sm md:text-base">还没有任何书籍，快来创建第一本吧！</p>
                </div>
            </div>
        <% } %>

    </div>
</div>

<%- include('../../layouts/base/footer') %>